<template>
    <transition name="move">
        <div class="mineLove" v-show="mineLoveFlag">
            <m-title :title="title" :returnShow="returnShow" @clickHide="hide"></m-title>
            <div class="check-title" @click="handleMskShow" v-show="loveDetail !=  null">
                <span class="check-text">{{checkValue}}</span>
                <span class="check-icon iconfont">&#xe615;</span>
            </div>
            <scroll class="mine-love-container" :data="loveDetail">
                <div>
                    <ul class="mine-love-item">
                        <li class="mine-love-list" v-for="(item, index) in loveDetail" :key="index" v-show="temaFlag && activityFlag ? true : item.mestype === checkFlag">
                            <!-- 团队类 -->
                            <router-link :to="'/volunteerDetail/'+item.relid" tag="div" class="love-team" v-show="item.mestype==='2'">
                                <div class="left">
                                    <img class="img" :src="item.coverimg" alt="" />
                                </div>
                                <div class="middle">
                                    <h6 class="team-title">{{item.title}}</h6>
                                    <p class="team-desc">{{item.content}}</p>
                                </div>
                            </router-link>
                            <!-- 活动类 -->
                            <router-link :to="'activityText/'+item.relid" tag="div" class="love-activity" v-show="item.mestype==='1'">
                                <div class="left">
                                    <img class="img" :src="item.coverimg" alt="" />
                                </div>
                                <div class="middle">
                                    <div class="activity-title">{{item.title}}</div>
                                    <div class="start-wrapper">
                                        <div class="start-text">
                                            <i class="icon"></i>
                                            <span class="text">开始时间</span>
                                        </div>
                                        <div class="start-time">
                                            <span class="start-date">{{item.startdate}}</span>
                                            <span class="start-hour">{{item.starttime}}</span>
                                        </div>
                                        <div class="end-text">
                                            <i class="icon"></i>
                                            <span class="text">结束时间</span>
                                        </div>
                                        <div class="end-time">
                                            <span class="end-date">{{item.enddate}}</span>
                                            <span class="end-hour">{{item.endtime}}</span>
                                        </div>
                                    </div>
                                    <p class="activity-address">{{item.address}}</p>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                </div>
                <!-- 请求数据loading -->
                <!-- <div class="loading-wrapper" v-show="!loveDetail.length">
                    <loading></loading>
                </div> -->
            </scroll>
            <!-- 暂无收藏信息 -->
            <div class="mine-love-none" v-show="loveDetail === null">
                <a href="javascript:;" class="mine-love-none-btn"></a>
            </div>
            <van-actionsheet v-model="mskShow" :actions="actions" cancel-text="取消" />
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import MTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'

    export default {
        data () {
            return {
                title: "我的收藏",
                returnShow: true,
                checkValue: '全部',
                mineLoveFlag: false,
                mskShow: false,
                flag: false,
                temaFlag: true,
                activityFlag: true,
                checkFlag: 1,
                loveDetail: [],
                actions: [
                    {
                        name: '全部',
                        callback: this.handleClick
                    },
                    {
                        name: '团队',
                        callback: this.handleClick
                    },
                    {
                        name: '活动',
                        callback: this.handleClick
                    }
                ]
            }
        },
        methods: {
            show () {
                this.mineLoveFlag = true
            },
            hide () {
                this.mineLoveFlag = false
            },
            handleMskShow () {
                this.mskShow = !this.mskShow
            },
            handleClick (item) {
                this.checkValue = item.name
                if (this.checkValue === "团队") {
                    this.temaFlag = false
                    this.checkFlag = '2'
                }
                if (this.checkValue === "活动") {
                    this.temaFlag = false
                    this.checkFlag = '1'
                }
                if (this.checkValue === "全部") {
                    this.temaFlag = true
                }
                this.mskShow = false
            },
            // 获取信息
            getLoveInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=myshoucang', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid")
                }).then((res) => {
                    if (res.data.rescode=='0000') {
                        this.loveDetail = res.data.data
                    }
                }).catch(function (error) {

                })
            }
        },
        components: {MTitle,Loading,Scroll},
        created () {
            this.getLoveInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .mineLove
        position: fixed
        top: 0
        left: 0
        width: 100%
        height: 100%
        overflow: hidden
        background: #fff
        padding-top: 10px
        box-sizing: border-box
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .check-title
            position: absolute
            top: 23px
            right: 15px
            color: #fff
        .mine-love-none
            position: absolute
            width: 100%
            top: 50%
            transform: translateY(-50%)
            z-index: 9
            .mine-love-none-btn
                background: url('./icon3.png') no-repeat
                width: 191px
                height: 36px
                background-size: 100% 100%
                display: block
                margin: 0 auto
        .mine-love-container
            position: absolute
            width: 100%
            top: 56px
            bottom: 0px
            background: #fff
            padding: 0 15px
            box-sizing: border-box
            overflow: hidden
            .loading-wrapper
                position: absolute
                width: 100%
                top: 50%
                -webkit-transform: translateY(-50%)
                transform: translateY(-50%)
                z-index: 9
            .mine-love-item
                width: 100%
                .mine-love-list
                    width: 100%
                    height: 120px
                    border-bottom: 1px solid #eee
                    box-sizing: border-box
                    overflow: hidden
                    position: relative
                    &:last-child
                        border-bottom: 0
                    .love-team
                        display: flex
                        align-items: center
                        height: 100%
                        width: 100%
                        .left
                            flex: 0 0 100px
                            width: 100px
                            margin-right: 10px
                            .img
                                width: 100px
                        .middle
                            flex: 1
                            overflow: hidden
                            .team-title
                                font-size: 14px
                                width: 100%
                                ellipsis()
                            .team-desc
                                font-size: 12px
                                color: #888
                                margin-top: 4px
                                line-height: 130%
                                text-align: justify
                    .love-activity
                        width: 100%
                        height: 120px
                        border-bottom: 1px solid #eee
                        box-sizing: border-box
                        display: flex
                        align-items: center
                        overflow: hidden
                        position: relative
                        .left
                            flex: 0 0 100px
                            width: 100px
                            margin-right: 10px
                            .img
                                width: 100px
                        .middle
                            flex: 1
                            ellipsis()
                            .activity-title
                                width: 100%
                                font-size: 14px
                                ellipsis()
                            .activity-address
                                font-size: 10px
                                color: #888
                                ellipsis()
                                margin-top: 4px
                            .start-wrapper
                                margin-top: 6px
                                .start-text,.end-text
                                    font-size: 0
                                    .icon
                                        background: url('./icon1.png') no-repeat
                                        width: 9px
                                        height: 9px
                                        background-size: 100% 100%
                                        display: inline-block
                                    .text
                                        font-size: 14px
                                        color: #0094d4
                                        display: inline-block
                                        margin-left: 6px
                                .start-time,.end-time
                                    font-size: 0
                                    margin-top: 4px
                                    .start-date,.end-date
                                        font-size: 14px
                                        color: #d40000
                                    .start-hour,.end-hour
                                        font-size: 14px
                                        color: #d40000
                                        margin-left: 10px
                                .end-text
                                    margin-top: 4px
                                    .icon
                                        background: url('./icon2.png') no-repeat
                                        background-size: 100% 100%
                                    .text
                                        color: #888
                                .end-time
                                    .end-date,.end-hour
                                        color: #888
                    
</style>